<template>
    <div>
        <Row type="flex" justify="center" :gutter="16">
            <Col style="width:280px;margin-top:16px">
            <Card dis-hover>
                <div>
                    <Row type="flex" justify="space-between" align="middle">
                        <Col span="14">
                        <h3 class="ivu-mb-16" v-if="detail.isTerm">{{detail.Term}}</h3>
                        <h3 class="ivu-mb-16" v-else>{{detail.gzYear}}年{{detail.IMonthCn}}{{detail.IDayCn}}</h3>
                        <p class="ivu-mb-8">{{detail.GlYear}}年{{detail.GlMonth}}月{{detail.GlDay}}日</p>
                        <p class="ivu-mb-16"><strong>{{detail.ncWeek}}</strong></p>
                        <p style="display:flex;justify-content: start;align-items: center;"
                            v-if="calendardata.reminder">
                            <Icon type="ios-chatboxes-outline" size="20"></Icon>
                            <Ellipsis :text="calendardata.reminder.content" :lines="1" tooltip />
                        </p>
                        </Col>
                        <Col>
                        <p style="writing-mode:tb-rl;height:160px;font-size: 13px;font-family: cursive;" v-if="calendardata.quotes">
                            {{calendardata.quotes.quotes}}</p>
                        </Col>
                    </Row>
                </div>
                <Divider class="ivu-mt-8 ivu-mb-8" />
                <div>
                    <p style="text-align: center;">今日运势</p>
                    <h2 class="ivu-mb-16" style="text-align: center;" v-if="calendardata.fortune">
                        {{calendardata.fortune.title}}</h2>
                    <Row type="flex" justify="space-between" align="middle" v-if="calendardata.fortune">
                        <Col style="width:150px">
                        <div class="ivu-mb-8" style="display:flex;justify-content: start;align-items: center;">
                            <font color="#19be6b">宜：</font>
                            <Ellipsis v-if="calendardata.fortune.suitable" :text="calendardata.fortune.suitable"
                                :lines="1" tooltip />
                        </div>
                        <div style="display:flex;justify-content: start;align-items: center;">
                            <font color="#ed4014">忌：</font>
                            <Ellipsis v-if="calendardata.fortune.taboo" :text="calendardata.fortune.taboo" :lines="1"
                                tooltip />
                        </div>
                        </Col>
                        <Col>
                        <p @click="clicksign(calendardata.sign.signin_status)" v-if="calendardata.sign.signin_status">
                            <img :src="require(`@/assets/expression/${calendardata.sign.signin_status}.gif`)" alt="">
                        </p>
                        <Button v-if="+this.calendardata.sign.have_sign === 0"
                            @click="clicksign(calendardata.sign.signin_status)" type="primary">签到</Button>
                        </Col>
                    </Row>
                </div>
            </Card>
            </Col>
            <Col style="width:calc(100% - 280px)">
            <h3 class="ivu-mt-16 ivu-mb-16">我的待办</h3>
            <Card dis-hover v-if="!dhflist.total&&!xslylist.total&&!(xskfbool&&xskflist.total)&&!publiclist.total">
                <div style="height:53px;display:flex;justify-content: center;align-items: center;">暂无数据</div>
            </Card>
            <Row type="flex" :gutter="8" justify="start" align="top">
                <Col span="6" v-if="dhflist.total&&+dhflist.total>=0">
                <Card dis-hover class="cardheight">
                    <Row type="flex" justify="space-between" align="middle">
                        <Col>
                        <h4>待回访</h4>
                        </Col>
                        <Col>
                        <Badge :count="dhflist.total"></Badge>
                        </Col>
                    </Row>
                    <template v-if="dhflist.list">
                        <div v-for="(item, index) in dhflist.list" :key="index" class="ivu-mt-8">
                            <Row type="flex" justify="space-between" align="middle">
                                <Col style="display:flex">
                                <p class="username" :title="item.user_name">{{item.user_name}}</p>
                                <p class="username ivu-pl-8 ivu-pr-8" style="width:46px;">{{item.gender_str}}</p>
                                <p class="username" style="width:18px">{{item.age&&+item.age>0?item.age:''}}</p>
                                </Col>
                                <Col><a @click="ReturnVisit(item.id)">回访</a></Col>
                            </Row>
                        </div>
                    </template>
                    <Spin size="large" fix v-if="spindhf"></Spin>
                </Card>
                </Col>
                <Col span="6" v-if="xslylist.total&&+xslylist.total>=0">
                <Card dis-hover class="cardheight">
                    <Row type="flex" justify="space-between" align="middle">
                        <Col>
                        <h4>线索-留言</h4>
                        </Col>
                        <Col>
                        <Badge :count="xslylist.total"></Badge>
                        </Col>
                    </Row>
                    <template v-if="xslylist.list">
                        <div v-for="(item, index) in xslylist.list" :key="index" class="ivu-mt-8">
                            <Row type="flex" justify="space-between" align="middle">
                                <Col style="display:flex">
                                <p class="username">{{item.user_name}}</p>
                                <p class="username ivu-pl-8 ivu-pr-8" style="width:46px;">{{item.gender_str}}</p>
                                <p class="username" style="width:18px">{{item.age&&+item.age>0?item.age:''}}</p>
                                </Col>
                                <Col><a @click="contactmessage(item.id)">联系</a></Col>
                            </Row>
                        </div>
                    </template>
                    <Spin size="large" fix v-if="spinxsly"></Spin>
                </Card>
                </Col>
                <Col span="6" v-if="xskfbool&&xskflist.total&&+xskflist.total>=0">
                <Card dis-hover class="cardheight">
                    <Row type="flex" justify="space-between" align="middle">
                        <Col>
                        <h4>线索-客服</h4>
                        </Col>
                        <Col>
                        <Badge :count="xskflist.total"></Badge>
                        </Col>
                    </Row>
                    <template v-if="xskflist.list">
                        <div v-for="(item, index) in xskflist.list" :key="index" class="ivu-mt-8">
                            <Row type="flex" justify="space-between" align="middle">
                                <Col style="display:flex">
                                <p class="username">{{item.user_name}}</p>
                                <p class="username ivu-pl-8 ivu-pr-8" style="width:46px;">{{item.gender_str}}</p>
                                <p class="username" style="width:18px">{{item.age&&+item.age>0?item.age:''}}</p>
                                </Col>
                                <Col><a @click="contactservice(item.id)">联系</a></Col>
                            </Row>
                        </div>
                    </template>
                    <Spin size="large" fix v-if="spinxskf"></Spin>
                </Card>
                </Col>
                <Col span="6" v-if="publiclist.total&&+publiclist.total>=0">
                <Card dis-hover class="cardheight">
                    <Row type="flex" justify="space-between" align="middle">
                        <Col>
                        <h4>即将进入公海</h4>
                        </Col>
                        <Col>
                        <Badge :count="publiclist.total"></Badge>
                        </Col>
                    </Row>
                    <template v-if="publiclist.list">
                        <div v-for="(item, index) in publiclist.list" :key="index" class="ivu-mt-8">
                            <Row type="flex" justify="space-between" align="middle">
                                <Col style="display:flex">
                                <p class="username">{{item.user_name}}</p>
                                <p class="username ivu-pl-8 ivu-pr-8" style="width:46px;">{{item.gender_str}}</p>
                                <p class="username" style="width:18px">{{item.age&&+item.age>0?item.age:''}}</p>
                                </Col>
                                <Col><a @click="ReturnVisits(item.id)">回访</a></Col>
                            </Row>
                        </div>
                    </template>
                    <Spin size="large" fix v-if="spinPublic"></Spin>
                </Card>
                </Col>
            </Row>
            <h3 class="ivu-mt-16 ivu-mb-16">信息完善</h3>
            <Card dis-hover>
                <Row type="flex" :gutter="16" align="middle">
                    <Col style="position: relative; width:260px">
                    <Row type="flex" justify="start" align="middle">
                        <Col class="boxflex">
                        <p class="ivu-text-center ivu-mb-8">
                        <h3>{{perfectlist.rate?perfectlist.rate.toFixed(2):'0.00'}}%</h3>
                        </p>
                        <p class="ivu-text-center">完善率</p>
                        </Col>
                        <Col class="ivu-ml-16" v-if="+perfectlist.compare_than!==0">
                        <p v-if="+perfectlist.compare_than===-1">
                            <Icon type="md-arrow-down" color="#ed4014" />低于平均值{{perfectlist.diff_rate.toFixed(2)}}%
                        </p>
                        <p v-if="+perfectlist.compare_than===1">
                            <Icon type="md-arrow-up" color="#19be6b" />高于平均值{{perfectlist.diff_rate.toFixed(2)}}%
                        </p>
                        </Col>
                    </Row>
                    <div class="biaoqian">
                        <div class="biaoqians">待完善</div>
                    </div>
                    </Col>
                    <Col style="width:calc(100% - 260px)">
                    <Row type="flex" justify="space-between" align="middle">
                        <Col class="boxflex">
                        <p class="ivu-text-center ivu-mb-8">
                        <h3><a
                                @click="clickdetail({name: '微信', num: perfectlist.sum_wechat, data_type:'sum_wechat'})"><strong>{{perfectlist.sum_wechat}}</strong></a>
                        </h3>
                        </p>
                        <p class="ivu-text-center">微信</p>
                        </Col>
                        <Col class="boxflex">
                        <p class="ivu-text-center ivu-mb-8">
                        <h3><a
                                @click="clickdetail({name: '手机号', num: perfectlist.sum_phone, data_type:'sum_phone'})"><strong>{{perfectlist.sum_phone}}</strong></a>
                        </h3>
                        </p>
                        <p class="ivu-text-center">手机号</p>
                        </Col>
                        <Col class="boxflex">
                        <p class="ivu-text-center ivu-mb-8">
                        <h3><a
                                @click="clickdetail({name: '性别', num: perfectlist.sum_gender, data_type:'sum_gender'})"><strong>{{perfectlist.sum_gender}}</strong></a>
                        </h3>
                        </p>
                        <p class="ivu-text-center">性别</p>
                        </Col>
                        <Col class="boxflex">
                        <p class="ivu-text-center ivu-mb-8">
                        <h3><a
                                @click="clickdetail({name: '年龄', num: perfectlist.sum_age, data_type:'sum_age'})"><strong>{{perfectlist.sum_age}}</strong></a>
                        </h3>
                        </p>
                        <p class="ivu-text-center">年龄</p>
                        </Col>
                        <Col class="boxflex">
                        <p class="ivu-text-center ivu-mb-8">
                        <h3><a
                                @click="clickdetail({name: '部位', num: perfectlist.sum_body_parts, data_type:'sum_body_parts'})"><strong>{{perfectlist.sum_body_parts}}</strong></a>
                        </h3>
                        </p>
                        <p class="ivu-text-center">部位</p>
                        </Col>
                    </Row>
                    </Col>
                </Row>
                <Spin size="large" fix v-if="spinperfect"></Spin>
            </Card>
            <Row :gutter="16" type="flex" align="middle" justify="space-between">
                <Col>
                <h3 class="ivu-mt-16 ivu-mb-16">我的患者</h3>
                </Col>
                <Col>
                <DatePicker type="daterange" v-model="patienttime" @on-change="askDatapatient" placeholder="请选择日期"
                    style="width: 200px"></DatePicker>
                </Col>
            </Row>
            <Card dis-hover>
                <Row type="flex" justify="space-between" align="middle">
                    <Col v-for="(item, index) in patientlist" :key="index" class="boxflex">
                    <p class="ivu-text-center ivu-mb-8">{{item.status_name}}</p>
                    <p class="ivu-text-center">
                    <h3><a
                            @click="clickpatient({ data_type: '', name: item.status_name, num: item.num, patient_status_id: item.patient_status_id, time: patienttime})"><strong>{{item.num}}</strong></a>
                    </h3>
                    </p>
                    </Col>
                </Row>
                <Spin size="large" fix v-if="spinPatient"></Spin>
            </Card>
            <Row :gutter="16" type="flex" align="middle" justify="space-between">
                <Col>
                <h3 class="ivu-mt-16 ivu-mb-16">微信</h3>
                </Col>
                <Col>
                <DatePicker type="daterange" v-model="wechattime" @on-change="askDatawechat" :clearable="false"
                    placeholder="请选择日期" style="width: 200px"></DatePicker>
                </Col>
            </Row>
            <Card dis-hover>
                <template v-if="wechatlist.length>0">
                    <div v-for="(item,index) in wechatlist" :key="index">
                        <Row type="flex" justify="space-between" align="middle" class="ivu-mb-8">
                            <Col span="22">
                            <Row type="flex">
                                <Col span="7">昵称： {{item.wechatnick}}</Col>
                                <Col span="3">{{item.wechatno}}</Col>
                                <Col span="2">{{+item.isonline===0?'在线':'离线'}}</Col>
                                <Col span="12">
                                <font color="#ed3f14">{{+item.isonline===0?'':'请检查手机软件是否开启，离线状态下数据无法同步'}}</font>
                                </Col>
                            </Row>
                            </Col>
                            <Col>
                            <Button type="primary" @click="handleReport(item)">查看报表</Button>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-between">
                            <Col>未读：<strong>{{item.reader}}</strong></Col>
                            <Col>互动：<strong>{{item.message_total}}</strong></Col>
                            <Col>新增好友：<strong>{{item.new_friend}}</strong></Col>
                            <Col>标签率：<strong>{{(item.tag_ratio*100).toFixed(2)}}%</strong></Col>
                            <Col>备注率：<strong>{{(item.remark_ratio*100).toFixed(2)}}%</strong></Col>
                            <Col>拉黑/删除：<strong>{{item.backFriend}}</strong></Col>
                        </Row>
                        <Divider class="ivu-mt-8 ivu-mb-8" v-if="wechatlist.length>0&&+wechatlist.length>+index+1" />
                    </div>
                </template>
                <template v-else>
                    <div style="height:53px;display:flex;justify-content: center;align-items: center;">暂无数据</div>
                </template>
                <Spin size="large" fix v-if="spinWechat"></Spin>
            </Card>
            </Col>
        </Row>
        <!-- <div class="fixedadd" @click="handleOpenDrawer">新增</div> -->
        <Button class="fixedadd" type="primary" shape="circle" @click="handleOpenDrawer">新增</Button>
        <robot-report :reportInfo="reportInfo" ref="robotReport" :wechattime="wechattime" />
        <edit-patient ref="editPatient" @patientfun="initial" />
        <return-visit ref="returnVisit" @patientfuns="askDatadhf" />
        <return-visit ref="returnVisits" @patientfuns="askDatapublic" />
        <returnentry ref="returnentry" @askDataxskf="askDataxskf" />
        <returngarp ref="returngarp" @askData="askDataxsly" />
        <patientdetails ref="patient" @askData="askDatapatient" />
        <patientdetail ref="detail" @askData="askDataperfect" />
        <Modal v-model="imgmodal" title="请选择签到表情" @on-cancel="handleDrawerCancel">
            <div class="allimg">
                <Row type="flex" justify="space-between" class="code-row-bg">
                    <Col v-for="item in imglist1" :key="item">
                    <img @click="clickimg(item)" :class="{'active':+params.signin_status===+item}"
                        :src="require(`@/assets/expression/${item}.gif`)" alt="">
                    </Col>
                </Row>
                <Row type="flex" justify="space-between" class="code-row-bg">
                    <Col v-for="item in imglist2" :key="item">
                    <img @click="clickimg(item)" :class="{'active':+params.signin_status===+item}"
                        :src="require(`@/assets/expression/${item}.gif`)" alt="">
                    </Col>
                </Row>
                <Row type="flex" justify="space-between" class="code-row-bg">
                    <Col v-for="item in imglist3" :key="item">
                    <img @click="clickimg(item)" :class="{'active':+params.signin_status===+item}"
                        :src="require(`@/assets/expression/${item}.gif`)" alt="">
                    </Col>
                </Row>
            </div>
            <div slot="footer">
                <Button @click="handleDrawerCancel">取消</Button>
                <Button type="primary" @click="handleSubmit">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import {
        worktodowechatinfo,
        workpatientpatientlist,
        worktodocluegrab,
        worktodoclueentry,
        worktodocallback,
        worktodoentryseasoon,
        workpatientinformation,
        workcalendarcalendarlist,
        workcalendarsignin
    } from "@api/hqapi/indextwo";
    import returnVisit from "@/components/returnVisit";
    import robotReport from "@/components/robotReport";
    import editPatient from "@/components/editPatient";
    import returnentry from "./returnentry";
    import returngarp from "./returngarp";
    import patientdetail from "./patientdetail";
    import patientdetails from "./patientdetails";
    import calendar from "@/mixins/calendar";
    export default {
        name: 'visit',
        components: {
            robotReport,
            editPatient,
            returnVisit,
            returnentry,
            returngarp,
            patientdetail,
            patientdetails
        },
        data() {
            return {
                imgmodal: false,
                imglist1: ['1', '2', '3', '4', '5'],
                imglist2: ['6', '7', '8', '9', '10'],
                imglist3: ['11', '12', '13', '14', '15'],
                reportInfo: {},
                detail: {},
                wechattime: [new Date(), new Date()],
                patienttime: [new Date(), new Date()],
                wechatlist: [],
                patientlist: [],
                perfectlist: {},
                dhflist: [],
                xslylist: [],
                xskflist: [],
                publiclist: [],
                spinWechat: false,
                spinPatient: false,
                spinperfect: false,
                spindhf: false,
                spinxsly: false,
                spinxskf: false,
                spinPublic: false,
                xskfbool: false,
                calendardata: {},
                params: {
                    signin_status: '',
                    id: ''
                }

            };
        },
        methods: {
            handleDrawerCancel() {
                this.imgmodal = false
            },
            handleSubmit() {
                workcalendarsignin(this.params).then(res => {
                    this.params.id = res
                    this.calendardata.sign.signin_status = this.params.signin_status
                    this.calendardata.sign.have_sign = 1
                    this.imgmodal = false
                })
            },
            clicksign(num) {
                this.params.signin_status = num
                this.imgmodal = true
            },
            clickimg(num) {
                this.params.signin_status = num
            },
            /* @函数功能: 初始化 */
            initial() {
                let menus = JSON.parse(localStorage.getItem("menus"));
                for (let item of menus.sider) {
                    if (item.title === '线索') {
                        for (let items of item.children) {
                            if (items.title === "客服录入") {
                                this.xskfbool = true
                            }
                        }
                    }
                }
                let date = this.$Date().format('YYYY-MM-DD').split('-')
                this.setDetail({ year: date[0], month: date[1], day: date[2] })
                this.askDatadhf()
                this.askDataxsly()
                this.askDataxskf()
                this.askDatapublic()
                this.askDataperfect()
                this.askDatapatient()
                this.askDatawechat()
                this.askDatacalendar()
            },
            askDatacalendar() {
                workcalendarcalendarlist().then(res => {
                    this.calendardata = res
                    this.params.id = this.calendardata.sign.id ? this.calendardata.sign.id : ''
                    this.params.signin_status = this.calendardata.sign.signin_status ? this.calendardata.sign.signin_status : ''
                })
            },
            askDatadhf() {
                this.spindhf = true
                worktodocallback().then(res => {
                    this.dhflist = res
                    this.spindhf = false
                })
            },
            askDataxsly() {
                this.spinxsly = true
                worktodocluegrab().then(res => {
                    this.xslylist = res
                    this.spinxsly = false
                })
            },
            askDataxskf() {
                this.spinxskf = true
                worktodoclueentry().then(res => {
                    this.xskflist = res
                    this.spinxskf = false
                })
            },
            askDatapublic() {
                this.spinPublic = true
                worktodoentryseasoon().then(res => {
                    this.publiclist = res
                    this.spinPublic = false
                })
            },
            askDatapatient() {
                this.spinPatient = true
                let patienttimes = { start_time: this.patienttime[0], end_time: this.patienttime[1] }
                workpatientpatientlist(patienttimes).then(res => {
                    this.patientlist = res
                    this.spinPatient = false
                })
            },
            askDatawechat() {
                this.spinWechat = true
                let paramswechat = { start: this.wechattime[0], end: this.wechattime[1] }
                worktodowechatinfo(paramswechat).then(res => {
                    this.wechatlist = res
                    this.spinWechat = false
                })
            },
            askDataperfect() {
                this.spinperfect = true
                workpatientinformation().then(res => {
                    this.perfectlist = res
                    this.spinperfect = false
                })
            },
            setDetail(date) {
                this.detail = calendar.solar2lunar(date.year, date.month, date.day);
            },
            handleReport(row) {
                this.reportInfo = row;
                this.$refs.robotReport.handleRobot(this.wechattime, row);
            },
            handleOpenDrawer() {
                this.$refs.editPatient.handleOpenDrawer()
            },
            ReturnVisit(id) {
                this.$refs.returnVisit.handleReturnVisit(id);
            },
            ReturnVisits(id) {
                this.$refs.returnVisits.handleReturnVisit(id);
            },
            contactservice(id) {
                this.$refs.returnentry.askData(id);
            },
            contactmessage(id) {
                this.$refs.returngarp.askDataing(id);
            },
            clickdetail(data) {
                this.$refs.detail.detail(data);
            },
            clickpatient(data) {
                if (data.name === '全部患者') {
                    data.patient_status_id = ''
                } else if (data.name === '新患者') {
                    data.patient_status_id = ''
                    data.data_type = 'new_patient'
                }
                this.$refs.patient.patient(data);
            }
        },
        /* 挂载完成能访问DOM元素 */
        mounted() {
            this.initial();
        },
    };
</script>
<style scoped>
    /deep/.ivu-tooltip-rel {
        display: inline-block;
    }

    .fixedadd {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 80px;
        right: 120px;
        height: 55px;
        width: 55px;
        color: #fff;
        box-shadow: 3px 3px 15px #999;
        border-radius: 50%;
    }

    .biaoqian {
        position: absolute;
        top: -16px;
        right: 10px;
        width: 10px;
        height: 65px;
        border: 10px solid;
        border-color: #297ed9 #297ed9 rgba(255, 255, 255, 0) #297ed9;
    }

    .biaoqians {
        position: absolute;
        top: -8px;
        left: -10px;
        font-size: 10px;
        color: #fff;
        width: 20px;
        text-align: center;
    }

    .username {
        height: 18px;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 70px;
    }

    .cardheight {
        height: 145px;
    }

    .allimg img {
        padding: 2px;
        border: 2px solid rgba(0, 0, 0, 0);
    }

    .active {
        border: 2px solid #297ed9 !important;
    }

    .boxflex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>